<template>
  <div class='user-profile'>
    <van-nav-bar
      class="app-nav-bar"
      title="用户资料"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 资料展示 -->
    <van-cell
      title="头像"
      is-link value="内容"
      @click="isEditUserImageDialog = true"
    >
      <input
        type="file"
        name="userImage"
        hidden
        ref="userImageFile"
        accept="image/*"
        @change="onChange"
      />
      <van-image
        width="35"
        height="35"
        fit="cover"
        round
        center
        :src="userProfile.photo"
      />
    </van-cell>

    <van-cell
      title="昵称"
      is-link
      :value="userProfile.name"
      @click="isNameEditShow = true"
    />
    <van-cell
      title="性别"
      is-link
      :value="userProfile.gender === 1 ? '女' : '男'"
      @click="isGenderEditShow = true"
    />
    <van-cell
      title="生日"
      is-link
      :value="userProfile.birthday"
      @click="isBirthdayEditShow = true"
    />
    <!-- /资料展示 -->

    <!-- 修改头像确认弹窗 -->
    <van-dialog
      v-model="isEditUserImageDialog"
      class="editImageDialog"
      title="修改头像"
      show-cancel-button
      @confirm="$refs.userImageFile.click()"
    >
      <img :src="userProfile.photo"/>
    </van-dialog>
    <!-- /修改头像确认弹窗 -->

    <!-- 预览头像 -->
    <van-popup
      v-if="isPreviewImageShow"
      v-model="isPreviewImageShow"
      position="bottom"
      :style="{height: '100%'}"
    >
      <preview-image
        :imageFile="previewImage"
        @close="isPreviewImageShow = false"
        @update-image="userProfile.photo = $event"
      />
    </van-popup>
    <!-- /预览头像 -->

    <!-- 修改昵称 -->
    <van-popup
      v-model="isNameEditShow"
      position="bottom"
    >
      <!--
        :name="userProfile.name"
        @update-name="userProfile.name = $event"
        当传递给子组件的数据既要使用又要修改时，例如这里的 userProfile.name，这种情况下可以使用简写
      -->
      <!--
        v-model="userProfile.name"
        默认给子组件传递一个叫 value 的数据(:value="userProfile.name")
        父组件默认监听 input 事件 (@input="userProfile.name = $event")
        v-model 的本质还是父子通信，它仅仅是简化了父组件的使用
       -->
      <edit-name
        @closeEditNameShow="isNameEditShow = false"
        v-model="userProfile.name"
      />
    </van-popup>
    <!-- /修改昵称 -->

    <!-- 修改性别 -->
    <van-popup
      v-model="isGenderEditShow"
      position="bottom"
    >
      <edit-gender
        @closeEditGenderShow="isGenderEditShow = false"
        v-model="userProfile.gender"
      />
    </van-popup>
    <!-- /修改性别 -->

    <!-- 修改生日 -->
    <van-popup
      v-model="isBirthdayEditShow"
      position="bottom"
    >
      <edit-birthday
        v-if="isBirthdayEditShow"
        v-model="userProfile.birthday"
        @closeEditBirthdayShow="isBirthdayEditShow = false"
      />
    </van-popup>
    <!-- /修改生日 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import EditName from './components/edit-name'
import EditGender from './components/edit-gender'
import EditBirthday from './components/edit-birthday'
import PreviewImage from './components/preview-image'

export default {
  name: 'user-profile',
  components: {
    EditName,
    EditGender,
    EditBirthday,
    PreviewImage
  },
  props: {},
  data () {
    return {
      userProfile: {}, // 用户资料
      isNameEditShow: false,
      isGenderEditShow: false,
      isBirthdayEditShow: false,
      isPreviewImageShow: false,
      previewImage: '',
      isEditUserImageDialog: false // 修改头像确认弹窗
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadGetUserProfile()
  },
  mounted () {},
  methods: {
    async loadGetUserProfile () {
      const { data } = await getUserProfile()
      this.userProfile = data.data
    },
    // 选择头像后；input 的原生事件，当选择文件状态改变后触发该事件
    onChange () {
      this.isPreviewImageShow = true
      const blog = this.$refs.userImageFile.files[0]
      this.previewImage = blog
      // 解决选择同一个文件时不触发 change 事件的问题；清空其 value
      this.$refs.userImageFile.value = ''
    }
  }
}
</script>
<style lang='less' scoped>
.user-profile {
  .van-cell {
    align-items: center;
    .van-cell__value {
      justify-content: flex-end;
    }
  }
}
.editImageDialog {
  border-radius: 8px;
  width: 260px;
  img {
    width: 250px;
    padding: 5px 5px 5px 5px;
  }
  /deep/ .van-dialog__header {
    padding-top: 10px;
    color: #9c9c9c;
  }
}
</style>
